import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  Breadcrumb,
  Button,
  Container,
  ListGroup
} from 'react-bootstrap';
import { Link } from 'react-router-dom';
import queryString from 'query-string';

import "./less/index.css";

import { URL } from '../../config';
import { function_list_servs } from '../../actions/servs';

class App extends Component {

  state = {
    pid: queryString.parse(this.props.location.search).pid
  }

  componentDidMount () {
    function_list_servs(this.state.pid, this.props.dispatch, (list) => {
      if (list.length === 0) {
      }
    });
  }

  render () {
    return (
      <Container>
        <Breadcrumb>
          <Breadcrumb.Item href={URL.main_page}>项目列表</Breadcrumb.Item>
          <Breadcrumb.Item active>微服务</Breadcrumb.Item>
        </Breadcrumb>
        <Container className="serversList">
          <div className="header">
            <h4>微服务列表</h4>
            <Button variant="primary" onClick={() => this.props.history.push(URL.addserv_page + this.props.location.search)}>创建微服务</Button>
          </div>
          <div>
            {Object.keys(this.props.list).length > 0 ?
              <ListGroup variant="flush">
                {Object.keys(this.props.list).map(key => {
                  let item = this.props.list[key];
                  return (
                    <ListGroup.Item key={key}>
                      <Link to={URL.editserv_page + this.props.location.search + "&sid=" + key}>{item.name}</Link>
                    </ListGroup.Item>
                  )
                })
                }
              </ListGroup>
              :
              <span className="empty">该项目下还没有微服务，点击创建一个吧</span>
            }
          </div>
        </Container>
      </Container>
    )
  }
}

function mapStateToProps (state) {
  return {
    list: state.servs
  }
}

export default connect(mapStateToProps)(App);